<template>
	<div class="common-login">
		<div id="loadingwrapper">
			<div class="loading-box-s">
				<div class="loader-cicle"></div>
			</div>
		</div>
	</div>
</template>

<style lang="stylus" scoped>
	.common-login
		z-index:999
		position:fixed
		top:0
		left:0
		right:0
		bottom:0
		display:flex
		align-items:center
		justify-content: center

		#loadingwrapper .loading-box-s 
			display:flex
			align-items:center
			justify-content: center
			width: 80px
			height:80px
			text-align: center
			color: #fff
			background: rgba(0,0,0,.8)
			border-radius: 8px;
			box-shadow: 0px 0px 30px 1px #103136 inset
		

		#loadingwrapper .loader-cicle 
			position: relative
			width: 46px
			height: 46px
			margin-top: 15px
			margin-bottom: 15px
			border-radius: 50%
			display: inline-block
			vertical-align: middle
			border: 8px double #ccc
			-webkit-animation: ball-turn 1s linear infinite
			animation: ball-turn 1s linear infinite
		

		#loadingwrapper .loader-cicle::before 
			content: ""
			position: absolute
			width: 10px
			height: 10px
			background: #ccc
			border-radius: 50%
			bottom: 0
			right: 30px
	

		#loadingwrapper .loader-cicle::after 
			content: ""
			position: absolute
			width: 10px
			height: 10px
			background: #ccc
			border-radius: 50%
			left: 30px
			top: 0
	


		@keyframes ball-turn {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			100% {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}
</style>
